<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script>
    window.onload = function () {
      /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
        为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
      getRem(750, 100)
    }
    window.onresize = function () {
      getRem(750, 100)
    }
    function getRem(pwidth, prem) {
      var html = document.getElementsByTagName("html")[0]
      var oWidth =
        document.body.clientWidth || document.documentElement.clientWidth
      html.style.fontSize = (oWidth / pwidth) * prem + "px"
    }
  </script>
</head>

<body>
  <!-- <video controls style="width: 375px; height: 210px;">
        <source src="https://club-1252097922.file.myqcloud.com/hyatt/videos/hyatt_woc.mp4">
    </video> -->
  <!-- <p>Document</p> -->
  <div class="contain" style="text-align: center">
    <div class="contain-page">
      <div class="eason">
        <div class="hair"></div>
      </div>
      <div class="note note1">
        <img style="width: 23px; height: 21px" src="./img/note-1.png" alt="妖狐" />
      </div>
      <div class="note note2">
        <img style="width: 15px; height: 25px" src="./img/note-2.png" alt="妖狐" />
      </div>
    </div>
  </div>
</body>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .contain {
    background-image: url(./img/bg.jpg);
  }

  .contain-page {
    /* width: 375px;
  height: 812px; */
    position: relative;
    /* background-image: url(./img/bg.jpg);
  background-repeat: repeat;
  background-size: 100%; */
  }

  .eason {
    position: absolute;
    width: 375px;
    height: 812px;
    /* left: 50%;
  margin-left: -135px; */
    background-image: url(./img/cover.png);
    background-repeat: no-repeat;
    background-size: 270px 564px;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hair {
    width: 270px;
    height: 564px;
    background-image: url(./img/hair.png);
    background-size: 270px 2251px;
    background-position: 0px -1122px;
    background-repeat: no-repeat;
    animation-name: hair;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: steps(1, end);
  }

  @keyframes hair {
    from {
      background-position: 0px 4px;
    }

    33% {
      background-position: 0px -559px;
    }

    66% {
      background-position: 0px -1122px;
    }

    to {
      background-position: 0px -559px;
    }
  }

  .note {
    position: absolute;
  }

  .note1 {
    top: 50px;
    left: 50px;
    animation-duration: 1s;
    animation-name: img1;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .note2 {
    top: 80px;
    right: 50px;
    animation-name: img2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes img1 {
    0% {}

    100% {
      transform: translate3d(-5px, -10px, 0);
      /* top: 45px;
    left: 40px; */
    }
  }

  @keyframes img2 {
    0% {
      opacity: 0;
    }

    100% {
      transform: translate(0, 100px);
      opacity: 1;
    }
  }

  p {
    /* 执行一次时间 */
    animation-duration: 3s;
    /* 关键帧name */
    animation-name: slidein;
    /* 重复播放次数 */
    animation-iteration-count: infinite;
    /*  */
    animation-direction: alternate;
    font-size: 1rem;
    font-size: 16px;
  }

  @keyframes slidein {
    from {
      margin-left: 100%;
      /* width: 300%; */
    }

    75% {
      /* font-size: 300%; */
      margin-left: 25%;
      width: 150%;
    }

    to {
      margin-left: 0%;
      width: 100%;
    }
  }
</style>

</html>